<template>
    <div>
      <table>
        <tr>
          <td>用户名</td>
          <td><input type="text" v-model="name" placeholder="请输入用户名"></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="text" v-model="password" placeholder="请输入密码"></td>
        </tr>
        <tr>
          <td></td>
          <td><Button @click="submit" color="blue">提交</Button></td>
        </tr>
        
      </table>
    </div>
</template>

<script>
    export default {
        name: "login",
      data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name:'',
      password:''

    }
    },
      methods:{

     //定义提交事件
    submit:function () {
      //非空验证
      if(this.username == ''){
        this.$Message('您没有输入用户名')
        return false;
      }
      if(this.password == ''){
        this.$Message('密码不能为空')
        return false;
      }

      //请求后台接口 get==>params  post==>data
      this.axios.get('http://localhost:8000/login/',{params:{name:this.name,password:this.password}}).then((result) =>{

        console.log(result)
        //登陆成功存储locaStorge
        localStorage.setItem('name',result.data.name)
        localStorage.setItem('uid',result.data.uid)

        this.$Message(result.data.message);
        //登陆成功跳转首页
        this.$router.push('/')

      })

    }
  }

    }
</script>

<style scoped>

</style>
